import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {RecommendationNavigationProp} from '../../types';
import {BottomSheet} from '@rneui/themed';
interface listItem {
  key: string;
}
const Recommendation = () => {
  const navigation = useNavigation<RecommendationNavigationProp>();
  const [isVisible, setIsVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const [list, setList] = useState<listItem[]>([]);
  useEffect(() => {
    getList();
  }, []);
  const refresh = () => {
    setLoading(true);
    let arr = [];
    for (let i = 0; i < 10; i++) {
      arr.push({
        key: i + '下载刷新',
      });
    }
    setTimeout(() => {
      setList(arr);
      setLoading(false);
    }, 200);
  };
  function getList() {
    let arr = [];
    for (let i = 0; i < 10; i++) {
      arr.push({
        key: i + '',
      });
    }
    setTimeout(() => {
      setList(arr);
      setLoading(false);
    }, 200);
  }
  const loadMore = () => {
    let arr = [];
    for (let i = 0; i < 20; i++) {
      arr.push({
        key: i + '加载更多',
      });
    }
    setTimeout(() => {
      setList([...list, ...arr]);
    }, 200);
  };
  return (
    <>
      <FlatList
        refreshing={loading}
        onRefresh={refresh}
        onEndReachedThreshold={0.5}
        onEndReached={loadMore}
        data={list}
        numColumns={2}
        horizontal={false}
        style={{paddingTop: 10, flex: 1}}
        renderItem={({item}) => (
          <View style={styles.item}>
            <TouchableWithoutFeedback
              onPress={() => {
                navigation.navigate('PlayVideo', {id: item.key});
              }}>
              <View>
                <Image
                  style={{width: '100%'}}
                  source={require('../../assets/img/11.png')}></Image>
                <View
                  style={{
                    paddingTop: 10,
                    paddingBottom: 10,
                    paddingLeft: 5,
                    paddingRight: 5,
                  }}>
                  <Text>title{item.key}</Text>
                </View>
              </View>
            </TouchableWithoutFeedback>

            <View
              style={{
                paddingBottom: 10,
                paddingLeft: 5,
                paddingRight: 5,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <TouchableWithoutFeedback
                onPress={() => {
                  navigation.navigate('My');
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}>
                  <View
                    style={{
                      width: 15,
                      height: 15,
                      borderRadius: 4,
                      borderWidth: 1,
                      borderColor: 'gray',
                      borderStyle: 'solid',
                      justifyContent: 'center',
                      alignItems: 'center',
                      marginRight: 5,
                    }}>
                    <Text style={{color: 'gray', fontSize: 10}}>up</Text>
                  </View>
                  <Text style={{color: 'gray', fontSize: 12}}>
                    隧道费{item.key}
                  </Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback
                onPress={() => {
                  setIsVisible(true);
                }}>
                <View style={{transform: [{rotate: '90deg'}]}}>
                  <Text style={{fontWeight: 'bold'}}>···</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </View>
        )}></FlatList>
      <BottomSheet
        isVisible={isVisible}
        scrollViewProps={{scrollsToTop: true}}
        onBackdropPress={() => {
          setIsVisible(false);
        }}>
        <View
          style={{
            backgroundColor: '#EBEEF5',
            paddingLeft: 20,
            paddingRight: 20,
            paddingBottom: 40,
          }}>
          <View style={{height: 10, alignItems: 'center', marginTop: 10}}>
            <View
              style={{
                height: 2,
                backgroundColor: '#333',
                width: 20,
                borderRadius: 2,
              }}></View>
          </View>
          <View style={{height: 40, backgroundColor: '#fff', borderRadius: 5}}>
            <Text style={{lineHeight: 40, color: '#303133'}}>
              添加至稍后再看
            </Text>
          </View>
          <View style={{flexDirection: 'row', marginTop: 15, marginBottom: 10}}>
            <Text style={{color: '#303133'}}>反馈</Text>
            <Text style={{color: '#909399', fontSize: 12}}>
              (选择后将优化此内容)
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
          </View>
          <View style={{flexDirection: 'row', marginTop: 15, marginBottom: 10}}>
            <Text style={{color: '#303133'}}>我不想看</Text>
            <Text style={{color: '#909399', fontSize: 12}}>
              (选择后将优化此内容)
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
          </View>
        </View>
      </BottomSheet>
    </>
  );
};

export default Recommendation;

const styles = StyleSheet.create({
  item: {
    width: '47%',
    textAlign: 'center',
    marginBottom: 10,
    marginLeft: '2%',
    borderRadius: 5,
    backgroundColor: '#ffffff',
    shadowColor: '#333',
  },
});
